<template>
  <div class="register-container">
    <el-row>
      <el-col :span="8"><div style="color: transparent">占位符</div></el-col>
      <el-col :span="8"
        ><div class="register-box">
          <div class="logo-container pos logo-container-vertical">
            <div style="cursor: pointer">
              <span class="logo"
                ><img src="static/img/logo.da677f6a.png" /></span
              ><span class="title"> 综保平台 <br /> </span>
            </div>
          </div>
          <div class="title">注册</div>
          <el-form
            class="register-form"
            :model="registerForm"
            ref="registerForm"
            :rules="rules"
          >
            <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
              <el-tab-pane label="企业单位" name="enterprise" role="tabpanel">
                <el-alert
                  type="error"
                  effect="light"
                  :closable="false"
                  title="请勿填报任何敏感或涉密内容！"
                  description="温馨提示：系统需实名注册，手机号码也需要登记在您本人名下。"
                ></el-alert>
                <div class="dpane">
                  <el-divider content-position="center"
                    >企业基本信息</el-divider
                  >
                  <div class="company-form">
                    <el-form-item
                      label="企业名称"
                      prop="enterprisename"
                      size="small"
                      inline-message="true"
                    >
                      <el-input
                        v-model="registerForm.enterprisename"
                        size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="企业所在省市" prop="enterpriseregion">
                      <el-cascader
                        v-model="value"
                        :options="options"
                        :props="{ expandTrigger: 'hover' }"
                        @change="handleChange"
                        size="small"
                      ></el-cascader>
                    </el-form-item>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="用户单位" name="user" role="tabpanel"
                >配置管理</el-tab-pane
              >
            </el-tabs>
          </el-form>
        </div></el-col
      >
      <el-col :span="8"><div style="color: transparent">占位符</div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "enterprise",
      registerForm: { enterprisename: "" },
      rules: {
        enterprisename: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          { min: 10, max: 100, message: "长度在 5 到 50个字", trigger: "blur" },
        ],   enterpriseregion: [
          { required: true, message: "请输入企业所在省市", trigger: "blur" },
        ],
      },
      value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    validate(formName) {
      this.$refs[formName].validate();
    },
  },      handleChange(value) {
        console.log(value);
      }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register-container {
  position: relative;
  height: 100vh;
  background: url("../assets/images/login-background.jpg") 50% fixed no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  overflow: hidden;
  overflow-y: auto;
}
.el-row {
  position: relative;
  box-sizing: border-box;
}
[class*="el-col-"] {
  float: left;
  box-sizing: border-box;
}
.register-container .register-box {
  position: relative;
  max-width: 100%;
  padding: 4.5vh 5.5vh 1vh 4.5vh;
  margin: 6vh 0;
  overflow: hidden;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background: #fff;
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.logo-container {
  text-align: left !important;
}
.logo-container-column,
.logo-container-comprehensive,
.logo-container-float,
.logo-container-vertical {
  position: relative;
  overflow: hidden;
  background: transparent;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.register-container .register-box .pos .logo img {
  height: 40px !important;
}
.register-box .logo-container .title {
  display: none;
}
.register-container .register-box .title {
  font-family: PingFangSC-Medium;
  font-size: 30px;
  color: #222;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
}
.register-container .register-box .dpane {
  padding: 10px 0;
  width: 100%;
}
.register-container .register-box .dpane .company-form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
}
.register-container .register-box .dpane .company-form > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  flex: 1;
  margin-right: 20px;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  line-height: 32px;
}
.register-container .el-form-item__content {
  min-height: 32px;
  line-height: 32px;
}
</style>
